/**
 * Fichier Javascript du jeu du pendu
 */

/* Variables globales*/

var nbErreur; 
var maxErreur=9;
var tour;
var pTour;
var mots;
var divFr;
var divEn;  
var triche;
var gauche;

/** 
 * Fonction principale qui envoie la requête au serveur lors du clic sur une lettre
 * session (String): identifiant de la session en cours
 * action (String): commencer ou jouer suivant l'etat du jeu
 * lettre (Character): lettre cliquee par l'utilisateur
 */
function envoieLettre(session,action,lettre){
    var xmlhttp;
    try {
        // IE
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
    } 
    catch (e) {
        // Mozilla
        xmlhttp=new XMLHttpRequest();
    }
    
    // j'installe le gestionnaire d'evenements
    // lors du changement d'etat
    
    // adresse relative du traitement de la requete ajax
    var url = "ajax/verifierMot.php";
    // parametres de la requete ajax
    var params = "session="+session+"&action="+action+"&lettre="+lettre+"&triche="+triche+"&nbErreur="+nbErreur;
    // preparation de la requete ajax en GET
    xmlhttp.open("GET", url+'?'+params, true);

    // Traitement javascript de la reponse
    xmlhttp.onreadystatechange=function(){
        // Traitement different selon l'action
        if (action=='jouer'){
            // Actualise le jeu: lettre trouvee, nombre d'erreurs...
            traiterChangementEtat();
            
        }
        // Le joueur commence le jeu
        else if (action=='commencer'){
            // Changement du contenu du lien commencer
            document.getElementById("comm").innerHTML="Recommencer";
            document.getElementById("paragrapheDebut").innerHTML="Pour gagner il ne faudra pas être pendu (ou lire <a href='regles.php' title='Les règles'>les règles</a>)! Le mot français et le mot anglais sont respectivement sur la première et la deuxième ligne. Bonne chance.";
            // Initialisation du jeu
            initJeu();
        }
        else{
            // Aucune action specifie pour la requete ajax
            (alert('Aucune action  n\'a &eacute;t&eacute; sp&eacute;cifi&eacute;e. Il y a un probl&egrave;me'));
        }
    }

    // Execution de la requete              
    xmlhttp.send(null);
                    
    /**
    * Initialisation du jeu (appele avec l'action commencer)
    */                 
    function initJeu(){
        // requete effectuee
        if(xmlhttp.readyState==4)
        {
            // OK
            if(xmlhttp.status < 400) 
            {
                // recuperation de la reponse du fichier PHP de la requete 
                var reponse = xmlhttp.responseText;
                
                // Separation des elements de la reponse dans un tableau
                var tab = reponse.split('#');
                var sId=tab[0];
                tour=tab[1];
                var motFr=tab[3];
                var motEn=tab[4];
                var jeu = document.getElementById("jeu");
                if ( jeu.hasChildNodes() )
                {
                    while ( jeu.childNodes.length >= 1 )
                    {
                        jeu.removeChild( jeu.firstChild );       
                    } 
                }
                // Le jeu n'a pas ete initialise car aucun mot disponible
                if (sId=='error'){
                    document.getElementById("paragrapheDebut").innerHTML="Il n'y a aucun mot disponible dans la base. Il faudrait peut être en <a href='formulaire.php' title='formulaire'>soumettre un</a> à notre administrateur...";
                }
                // Jeu correctement initialise, le joueur peut jouer
                else{
                    
                    /*creation des elements du jeu*/
                
                    //partie gauche du jeu
                    gauche=document.createElement("div")
                    gauche.id="gauche";
                
                    //paragraphe tour
                    pTour = document.createElement("p");
                    pTour.id = "numTour";
                    //paragraphe erreur
                    pErreur = document.createElement("p");
                    pErreur.id = "nbErreurs";
                    nbErreur=0;     
                    
                    //mot francais
                    divFr= document.createElement("div");
                    divFr.id = "fr";
                    divFr.className = "grosmot";
                    divFr.innerHTML=motFr;
                
                    //mot anglais
                    divEn= document.createElement("div");
                    divEn.id = "en";
                    divEn.className = "grosmot";
                    divEn.innerHTML = motEn;

                    mots= document.createElement("div");
                    mots.id = "mots";
                    
                    //MAJ du jeu
                    updateTour(tour);
                    updateErreur(sId);
                    
                    //ajout des elements au jeu
                    jeu.appendChild(gauche);                 
                    gauche.appendChild(pTour);
                    gauche.appendChild(pErreur);
                
                    mots.appendChild(divFr);
                    mots.appendChild(divEn);
                
                    gauche.appendChild(mots);
                
                    //affichage du clavier
                    afficherClavier(sId);
                
                    //affichage du pendu
                    var divPendu = document.createElement("div");
                    divPendu.id = "dessin";
                    divPendu.innerHTML='<canvas id="canvasPendu" width="350" height="500"/>';
                    jeu.appendChild(divPendu);  
                    //dessin du pendu
                    dessinerPendu();
                }
            }
            else 
            {
                // erreur
                alert("Â Erreur (statut : " + xmlhttp.status + " ). Ce n'est pas votre faute, contactez l'administrateur du site.");
            }
        }
    }
    
    /**
     * Traite l'actualisation du jeu avec l'action jouer. MAJ jeu, dessin...
     */
    function traiterChangementEtat(){
        // requete effectuee
        
        if(xmlhttp.readyState==4)
        {
            // OK
            if(xmlhttp.status < 400) 
            {
                // recuperation de la reponse AJAX
                var reponse = xmlhttp.responseText;
                var tab = reponse.split('#');
                /**
                 * Pendu
                 * 0: le joueur n'a pas fait d'erreur
                 * 1: le joueur a fait une erreur
                 * 2: le joueur a perdu
                 */
                var pendu = tab[0];
                
                switch(pendu){
                    case "1":
                        nbErreur++;
                        //maj affichage jeu
                        dessinerPendu();
                        if (nbErreur<maxErreur){
                            updateErreur();
                        }
                        else{
                            motFr = tab[5];
                            motEn = tab[6];
                        
                            //gere la fin de partie, ici perdu
                            gestionFin('perdu',motFr,motEn);
                        }
                        break;
                   
                    default:
                        //lettre bonne
                        tour = tab[2];
                        //maj jeu
                        updateTour();
                        var motFr = tab[3];
                        var motEn = tab[4];

                        //maj contenu div des mots
                        document.getElementById("fr").innerHTML = motFr;
                        document.getElementById("en").innerHTML = motEn;

                        //on test si les mots ne contiennent plus de underscore
                        //si c'est le cas, c'est gagné!
                        var vRegEx=/[_]/;
                        if (!vRegEx.test(motFr) && !vRegEx.test(motEn)){
                            gestionFin('gagne',motFr,motEn);
                        }
                
                        break;
                }
            }
            else 
            {
                // erreur
                alert("Â Erreur (statut : " + xmlhttp.status + " )");
            }
        }
    }               
    return false;
}

/**
 * Mise a jour du nombre de tours
 */
function updateTour(){
    pTour.innerHTML = 'Tour '+tour;
}

/**
 * Mise a jour du nombre d'erreurs
 */
function updateErreur(){
   
    var s='Erreur '+nbErreur+'/'+maxErreur;                  
    pErreur.innerHTML = s;
}   
        
/**
 * Tricher cey mal 
 */        
function tricher(el){
    triche=0;
    if (el.checked){
        triche=1;
    }
}
      
/**
 * Affichage du clavier cree dynamiquement 
 * a partir du nouvel identifiant de session 
 * lors de l'initialisation du jeu
 * session (String) : identifiant de la session en cours
 */
function afficherClavier(sessionId){
    //creation de l'alphabet
    var alphas = [];
    for(i = 1; i <= 26; i++){
        alphas[i-1] = String.fromCharCode(64+i); 
    }
    
    //creation du conteneur de l'alphabet                
    var divClavier = document.createElement("div");
    divClavier.id = "clavier";
    
    //creation des boutons contenant les lettres de l'alphabet
    for (var ab in alphas) {
        var lien='<button class="monclavier" onclick="  dejaClique(this) ; envoieLettre(\''+ sessionId + '\',\'jouer\',\'' + alphas[ab] + '\'); ">' +alphas[ab] + '</button> ';
        divClavier.innerHTML+=lien;
    }
                    
    gauche.appendChild(divClavier);
}

/**
 * Empeche de jouer deux fois la meme lettre une fois celle ci jouée
 * element (Element): bouton cliqué
 */
function dejaClique (element)
{
    element.style.backgroundColor = "#f6f6f6"; 
    element.disabled= true; 
    element.style.border="2px solid grey";
}

/**
 * Gestion de la fin du jeu en fonction du resultat de fin de partie
 * text (String): perdu ou gagne en fonction du resultat
 * motFr (String): mot a trouver en francais
 * motEn (String): mot a trouver en anglais
 */
function gestionFin(text,motFr,motEn){
  
    // On recupere les id des elements du jeu
    document.getElementById("paragrapheDebut").style.display="none";
    var jeu = document.getElementById("jeu");
    var content = document.getElementById("content");
    var dessin= document.getElementById("canvasPendu");
    
    // On supprime les elements du jeu
    jeu.removeChild(document.getElementById("gauche"));
    content.removeChild(document.getElementById("params"));
    
    // Creation de la div pour afficher le texte de fin
    divFin= document.createElement("div");
    divFin.id = "fin";
        
    // Creation du paragraphe de fin
    textfin= document.createElement('p');
    textfin.id = "text";
    
    // Creation du lien recommencer
    recommencer= document.createElement('a');
    recommencer.id = "rec";
    recommencer.innerHTML="Recommencer";
    recommencer.setAttribute("href","jeu.php");
    recommencer.className="fauxbouton";
    
    // Creation de la balise son
    var divAudio = document.createElement("div");
    divAudio.id = "son";
    
    if (text=='perdu'){
        
        // Création du paragraphe de fin
        textfin.innerHTML="<h2>Perdu</h2>Oh non, vous avez perdu!!! Le mot français était <span class='grosmot'>" + motFr + 
        "</span> et le mot anglais était  <span class='grosmot'>" + motEn + "</span> en <span class='grosmot'>"+ tour + "</span> tours. Vous venez de priver les enfants " +
        "du monde entier du jour qu'ils attendent le plus. En revanche, si vous voulez " +
        "vous rattrapper, il est encore temps, faites une nouvelle partie." ;
        divFin.appendChild(textfin);
        
        jeu.insertBefore(divFin,document.getElementById("dessin") );
        jeu.insertBefore(recommencer,document.getElementById("dessin") );
        document.getElementById("dessin").style.marginLeft="280px";
        document.getElementById("dessin").style.marginTop="20px";
    
        // Animation d'affichage du dessin avec jquery
        $(dessin).effect("bounce",{
            times:20
        },500);
        
        //Musique de fin
        divAudio.innerHTML='<audio autoplay src="images/perdu.mp3" preload></audio>';
        jeu.appendChild(divAudio);         
       
    }
    
    else if (text=='gagne'){
        
        // Création du paragraphe de fin
        textfin.innerHTML="<h2>Gagn&eacute;</h2>Bravo, vous avez trouvez les deux mots cachés qui étaient  <span class='grosmot'>" + motFr + 
        "</span> et  <span class='grosmot'>" + motEn + "</span> en <span class='grosmot'>"+ tour + "</span> tours. Vous avez ainsi sauv&eacute; le p&egrave;re Noël et la fête qu'il prépare, mais si vous " +
        "vous avez le goût du risque , vous pouvez toujours tenter de chercher un nouveau mot..." ;
        divFin.appendChild(textfin);
        
        jeu.appendChild(divFin);
        
        jeu.appendChild(recommencer);
        jeu.removeChild(document.getElementById("dessin"));
         
        // Creation de l'image'
        image= document.createElement('img');
        image.src=("images/gagne.jpg");
        image.style.marginLeft="300px";
        jeu.appendChild(image);
        
        //Musique de fin
        divAudio.innerHTML='<audio autoplay src="images/gagne.mp3" preload></audio>';
        jeu.appendChild(divAudio); 
        
    }  
      
    
}  

/**
 * Dessine le pendu a l'aide de la balise canvas en fonction du nombre d'erreur
 */
function dessinerPendu() {
   
    var canvas = document.getElementById("canvasPendu");
    var context = canvas.getContext("2d");
    
    switch(nbErreur){
        
        case 0:
            //Affichage de l'image de fond'
            var image1 = new Image();
            image1.src = "images/PlaineNeige.png";
            image1.border="10";
            context.drawImage(image1,0,0,350,500);
            break;
        
        case 1:
            // Tracer du rectangle en bas
            context.beginPath();
            context.rect(5, canvas.height-canvas.height/5-5, canvas.width-10, canvas.height/5);
            context.fillStyle = "#cd0a0a";
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = "black";
            context.stroke();
            break;
            
        case 2:
            // Tracer de la barre vertical
            context.beginPath();
            context.moveTo(canvas.width-canvas.width/7,canvas.height-canvas.height/5-10); // Nouveau point de départ
            context.lineTo(canvas.width-canvas.width/7, canvas.height/5); // Tracer de la ligne
            context.lineCap = "round";
            context.lineWidth=15; // Epaisseur de ligne
            context.strokeStyle = "black"; // couleur de ligne
            context.stroke();
            break;
            
        case 3:
            // Tracer de la barre horizontal
            context.beginPath();
            context.moveTo(canvas.width-canvas.width/7, canvas.height/5);
            context.lineTo(canvas.width/7, canvas.height/5);
            context.lineCap = "round";
            context.lineWidth=15; // Epaisseur de ligne
            context.strokeStyle = "black";
            context.stroke();
            break;
            
        case 4:
            // Tracer de la barre oblique
            context.beginPath();
            context.moveTo(canvas.width-canvas.width/7, 2*(canvas.height/5));
            context.lineTo(canvas.width-2.5*(canvas.width/7), canvas.height/5);
            context.lineCap = "round";
            context.lineWidth=15; // Epaisseur de ligne
            context.strokeStyle = "black";
            context.stroke();
            break;
            
        case 5:
            // Tracer de la tete
            centerX = (canvas.width-2*(canvas.width/7))/2;
            centerY = 2*(canvas.height/5);
            radius = canvas.width/10;
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.fillStyle = "#A7A37E";
            context.fill();
            context.lineWidth = 5;
            context.strokeStyle = "black";
            context.stroke();
            
            var image2 = new Image();
            image2.src = "images/bonnet.png";
            context.drawImage(image2,centerX-radius+7,centerY-radius-45, 80,80 );
                
            // Tracer des yeux
            context.beginPath();
            context.arc(centerX+centerX/10, centerY-radius/2.5, radius/6, 0, 2 * Math.PI, false);
            context.fillStyle = "white";
            context.fill();
            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();
            context.beginPath();
            context.arc(centerX-centerX/10, centerY-radius/3.5, radius/6, 0, 2 * Math.PI, false);
            context.fillStyle = "white";
            context.fill();
            context.lineWidth = 2;
            context.strokeStyle = "black";
            context.stroke();
             
            // Tracer de la bouche
            context.beginPath();
            startingAngle = 1.2 * Math.PI;
            endingAngle = 1.7 * Math.PI;
            context.arc(centerX+5, centerY+radius, radius*2/3, startingAngle, 
                endingAngle, false);
            context.lineWidth = 5;
            context.strokeStyle = "black";
            context.stroke();
            break;
            
        case 6:
            // Tracer du corps
            context.beginPath();
            context.moveTo(centerX,centerY+radius); // Nouveau point de départ
            context.lineTo(centerX,centerY+3*radius); // Tracer de la ligne
            context.lineCap = "round";
            context.lineWidth=5; // Epaisseur de ligne
            context.strokeStyle = "black"; // couleur de ligne
            context.stroke();
            break;
            
        case 7:
            //Tracer des jambes
            context.beginPath();
            context.moveTo(centerX,centerY+3*radius); 
            context.lineTo(centerX-radius,centerY+5*radius);
            context.stroke();
            context.beginPath();
            context.moveTo(centerX,centerY+3*radius); 
            context.lineTo(centerX+radius,centerY+4.5*radius); 
            context.lineWidth = 5;
            context.stroke();
            break;
            
        case 8:
            // Tracer des bras
            context.moveTo(centerX,centerY+2.1*radius);
            context.lineTo(centerX+1.5*radius,centerY+2*radius); 
            context.stroke();
            context.beginPath();
            context.moveTo(centerX,centerY+2.1*radius);
            context.lineTo(centerX-1.5*radius,centerY+1.5*radius+5); 
            context.lineWidth = 5;
            context.stroke();
            break;
            
        case 9:
            // Définition du point de départ du tracé
            context.beginPath();
            context.moveTo(95, canvas.height/5+9);
 
            // Tracer de la corde à l'aide de trois courbes quadratique'
            context.quadraticCurveTo(30, 230, 130, canvas.height/2);
            context.quadraticCurveTo(170, 260, canvas.width/3.5, canvas.height/2+10);
            context.quadraticCurveTo(canvas.width/3.5, 260, 130, canvas.height/2);
            context.moveTo(100,160);
                                  
            // Définition des paramétres de tracé
            context.lineWidth = 5; // Epaisseur de ligne
            context.strokeStyle = "#663300"; // Choix de la couleur
            context.stroke();
            break;
    }      

}
